import React, { Component } from 'react'

import { createRef } from 'react'

import List from './List'


import GoodsList from './GoodsList'

//  函数式组件 
const Com1 = () => <h1>我是com1 函数式组件</h1>


const Com3 = () => null
//  类组件

class Com2 extends React.Component {
    constructor(props) {
        super(props)
        this.addCount3 = this.addCount3.bind(this)
    }

    state = {
        count: 1
    }

    //   推荐 方式一
    addCount = () => {
        this.setState({ count: this.state.count + 1 })
    }

    addCount2 () {
        console.log(this)
        this.setState({ count: this.state.count + 1 })
    }

    addCount3 () {
        console.log(this)
        this.setState({ count: this.state.count + 1 })
    }



    render () {
        console.log(this) // 这里的this是  當前的组件实例
        const { count } = this.state
        return (
            <div> 我是com2 类组件


                <h1>  {this.state.count}</h1>
                {/* 事件绑定  方式一 */}
                <button onClick={this.addCount}> 点击++</button>
                {/* 方式二 */}
                <button onClick={this.addCount2.bind(this)}> 点击++</button>

                {/*  方式三 */}
                <button onClick={this.addCount3}> 点击++</button>


            </div>
        )
    }

}


class InputCom extends React.Component {
    // constructor() {
    //     super()
    //     // this.aaa = createRef('input')
    // }

    refDom = createRef()

    componentDidMount () {
        console.log(this.refDom.current.value)
        let ip = document.getElementById('input')
        ip.style.backgroundColor = 'red'

        this.refDom.current.style.color = 'green'
    }

    handlerClick = () => {
        console.log(this.refDom.current.value)
    }

    render () {
        return (
            <div>
                <h1>如何获取input中的值</h1>
                <p><input type="text" ref={this.refDom} id='input' /></p>
                <button onClick={this.handlerClick}>点击按钮</button>
            </div>
        )
    }
}


class StateForm extends React.Component {
    state = {
        msg: 'hello'
    }

    handlerChange = (e) => {
        this.setState({
            msg: e.target.value
        })
    }

    handlerClick = () => {
        console.log(this.state.msg)
    }
    render () {
        const { msg } = this.state
        return (
            <>
                <h1> 受控组件学习 </h1>
                <input type="text" value={msg}
                    onChange={this.handlerChange}
                />
                <button onClick={this.handlerClick}> 点击获取值</button>
            </>
        )
    }
}


export default function App () {
    return (
        <div>
            {/* <Com1></Com1>
            <Com2></Com2> */}
            {/* <InputCom></InputCom> */}
            {/* <StateForm></StateForm> */}

            {/* <List name='张三' num={10} arr={[1, 2, 3]}

                obj={{ name: 'zs', age: 19 }}
            ></List> */}

            <GoodsList></GoodsList>


        </div>
    )
}
